<html>
    <head>
        <title>过滤表格</title>
        <script src="./js/jquery-3.6.0.min.js"></script>
        <link rel="stylesheet" href="./css/index.css">
        <script>
            var data = [{
            name: "美白润养霜",
            url: "120",
            type: "100"
        },{
            name: "美白润体乳",
            url: "80",
            type: "60"
        },{
            name: "美白面膜",
            url: "68",
            type: "40"
        },{
            name: "美白柔肤水",
            url: "100",
            type:"200",
        },{
            name: "美白面霜",
            url: "60",
            type: "300",
        },{
            name: "美白眼膜",
            url: "98",
            type: "100"
        },{
            name: "共计6件商品",
        }];
        

        $(function(){
            //第一种：动态创建表格的方式，使用拼接html的方式 （推荐）
            // var html = "";
            // for( var i = 0; i < data.length; i++ ) {
            //     html += "<tr>";
            //     html +=     "<td>" + data[i].name + "</td>"
            //     html +=     "<td>" + data[i].url + "</td>"
            //     html +=     "<td>" + data[i].type + "</td>"
            //     html += "</tr>";
            // }
            // $("#J_TbData").html(html);

            //第二种： 动态创建表格的方式，使用动态创建dom对象的方式
            //清空所有的子节点
            $("hhh").empty();

            //自杀
            // $("#J_TbData").remove();

            for( var i = 0; i < data.length; i++ ) {
                //动态创建一个tr行标签,并且转换成jQuery对象
                var $trTemp = $("<tr></tr>");

                //往行里面追加 td单元格
                $trTemp.append("<td>"+ data[i].name +"</td>");
                $trTemp.append("<td>"+ data[i].url +"</td>");
                $trTemp.append("<td>"+ data[i].type +"</td>");
                // $("#J_TbData").append($trTemp);
                $trTemp.appendTo("#hhh");
            }
        });
        </script>
    </head>
    <body>
            <table>
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>地址</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody id="hhh">
                    </tbody>

    </body>
</html>